<template>
  <el-menu
      :collapse="isCollapse"
      active-text-color="#ffd04b"
      background-color="#262626"
      class="side-menu"
      default-active="1"
      text-color="#bfcbd9"
      router
  >
    <el-menu-item index="/home">
      <el-icon><icon-menu /></el-icon>
      <span>Home</span>
    </el-menu-item>

    <el-menu-item index="/course">
      <el-icon><Notebook /></el-icon>
      <span>Course</span>
    </el-menu-item>
    <el-menu-item index="/calendar">
      <el-icon><Calendar /></el-icon>
      <span>Calendar</span>
    </el-menu-item>
    <el-menu-item index="/about">
      <el-icon><More /></el-icon>
      <span>More</span>
    </el-menu-item>

<!--    <el-sub-menu index="1">-->
<!--      <template #title>-->
<!--        <el-icon><location /></el-icon>-->
<!--        <span>系统管理</span>-->
<!--      </template>-->
<!--      <el-menu-item index="/user">用户管理</el-menu-item>-->
<!--      <el-menu-item index="/role">角色管理</el-menu-item>-->
<!--    </el-sub-menu>-->



<!--    <el-menu-item index="/settings">-->
<!--      <el-icon><setting /></el-icon>-->
<!--      <span>系统设置</span>-->
<!--    </el-menu-item>-->
  </el-menu>
</template>

<script setup>
import {
  Location,
  Menu as IconMenu,
  Setting
} from '@element-plus/icons-vue'

// import { useResizeObserver } from '@vueuse/core'
// import { ref } from 'vue'
//
// const isCollapse = ref(false)
// const sideMenuRef = ref(null)
//
// useResizeObserver(sideMenuRef, (entries) => {
//   const entry = entries[0]
//   const { width } = entry.contentRect
//   isCollapse.value = width < 200
// })

defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

</script>

<style scoped>
.side-menu {
  border-right: none;
}
.side-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style>
